<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/login.css">
    <style>
      a{
        outline-style: none;
      }
      #con .item{
        display: none;
      }
      #con .active{
        display: block;
      }
      #btn .li{
        border-top: 1px  solid  transparent;
      }
      #btn .activeLi{
        color: #ff1268;
        border-top: 1px  solid  #ff1268;
      }
    </style>
    <script src="./js/jquery.min.js"></script>
</head>
<body>
    <div class="header">
        <img src="./images/logo.png" alt="">
    </div>
    <div class="lunbo">
        <div class="center">
          <img src="./images/registertu.jpg" alt="">
          <div class="right">
            <ul id="btn">
              <li class="li activeLi">密码登录</li>
              <li class="li">短信登录</li>
              <li class="li">扫码登录</li>
            </ul>
            <div id="con">
              <div class="item active">
              <p class="right11"><span></span><input type="text" name="" id="" placeholder="请输入手机号或邮箱"></p>
              <p class="right12"><span></span><input type="text" name="" id="" placeholder="请输入登录密码"></p>
              <p class="right13"><input type="button" name="" id="" placeholder="登录"> </p>
            </div>
            <div class="item">
              <p class="right21"><span></span><input type="text" name="" id="" placeholder="请输入手机号"></p>
              <p class="right22"><span></span><input type="text" name="" id="" placeholder="请输入验证码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;验证码"></p>
              <p class="right23"><input type="text" name="" id="" placeholder="登录"> </p>
            </div>
            <div class="item">
              <p class="right31">请升级至大麦最新版本</p>
              <img src="https://img.alicdn.com/imgextra/O1CN01NWWppn1XmTTwrC8ZA_!!1359772966-2-xcode.png" alt="">
            </div>
          </div>
            
          </div>
        </div>
    </div>
    <!-- <script src="./js/chx.js"></script> -->
    <script>
      $("#btn .li").click(function () {
        let index = $(this).index();
        $("#btn .li")
          .eq(index)
          .addClass("activeLi")
          .siblings()
          .removeClass("activeLi");
        $("#con .item")
          .eq(index)
          .addClass("active")
          .siblings()
          .removeClass("active");
      });
      let ipts = document.querySelectorAll("input");
      // 1-
      let isUserName = false;
      ipts[0].onchange = function () {
        let username = this.value;
        let reg = /^\w{3,18}$/;
        if (reg.test(username)) {
          this.nextElementSibling.innerHTML = "格式正确";
          isUserName = true;
        } else {
          this.nextElementSibling.innerHTML = "格式不正确";
          isUserName = false;
        }
      };
      // 2-
      let isPW = false;
      ipts[1].onchange = function () {
        let pw = this.value;
        let reg = /^.{3,32}$/;
        if (reg.test(pw)) {
          this.nextElementSibling.innerHTML = "格式正确";
          isPW = true;
        } else {
          this.nextElementSibling.innerHTML = "格式不正确";
          isPW = false;
        }
      };

      // 3-登录按钮
      //   http://jx.xuzhixiang.top/ap/api/login.php?username=11&password=1212
      ipts[2].onclick = function () {
        if (isPW && isUserName) {
          let username = ipts[0].value;
          let pw = ipts[1].value;
          let url = "http://jx.xuzhixiang.top/ap/api/login.php";
          axios
            .get(url, {
              params: {
                username: username,
                password: pw,
              },
            })
            .then((r) => {
              //服务器返回的数据
              console.log(r.data);

              alert(r.data.msg);
              if (r.data.code == 1) {
                // 用户id
                //  uid--一般时候登录的时候返回的数据-，登录页登录请求成功以后的获取uid，怎么在首页中登录页那个uid
                console.log(r.data.data.id);
                localStorage.setItem("id", r.data.data.id);
                // 3-2
                // token 是加密以后的密码-- 把他给服务器，服务器就知道你是谁，登录权限===身份令牌
                localStorage.setItem("token", r.data.data.token);
                location.href = "index.html";
              }
            });
        }
      };

    </script>
    
</body>
</html>